<template>
  <div class="small">
    <div
      class="small-card"
      v-for="(smaimg, index) in children.children"
      :key="index"
      @click="getVideoId(smaimg)"
    >
      <div class="img-card">
        <img :src="smaimg.model.resource.share_info.image+'?x-oss-process=image/resize,m_mfit,h_405,w_720'" alt="" />
        <div class="count">
          <div class="count-n">
            <span
              ><i class="iconfont icon-kanguo"></i
              >{{ getPlay(smaimg.model.resource.count.count_view) }}w</span
            >
            <span
              ><i class="iconfont icon-dianzan"></i
              >{{ smaimg.model.resource.count.count_like }}</span
            >
            <span
              ><i class="iconfont"></i
              >{{ getPlayTime(smaimg.model.resource.duration) }}'<span
                >{{ getPlaySecond(smaimg.model.resource.duration) }}"</span
              ></span
            >
          </div>
        </div>
      </div>
      <h5>{{ smaimg.model.resource.title }}</h5>
      <div class="user-btn">
        <span>{{ smaimg.model.resource.author.userinfo.username }}</span>
        <i class="iconfont icon-diandian"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["children"],
  methods: {
    getPlay: function (value) {
      return (value / 10000).toFixed(1);
    },
    getPlayTime: function (times) {
      return parseInt(times / 60);
    },
    getPlaySecond: function (times) {
      return parseInt(times % 60);
    },
       getVideoId(smaimg) {
      console.log(smaimg.model.resource.id);
      // this.$router.push({ path: "/home/classify" });
      this.$router.push({ path: "/classify",query:{id:smaimg.model.resource.id} })
      this.$store.commit("getIdVideo",{id:smaimg.model.resource.id})
    },
  },
};
</script>

<style lang="less" scoped>
.small {
  width: 45%;
  // height: 150px;
  height: 10rem;
  border-radius: 10px;
  background: white;
  margin: 5px;

  .small-card {
  
    .img-card {
      width: 100%;
      height: 86px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 10px 10px 0 0;
      }
      .count {
        width: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
        color: white;
        font-size: 13px;
        margin-bottom: 5px;
        .count-n{
             display: flex;
        justify-content: space-evenly;
        }
      }
    }
    h5 {
      margin: 0;
      font-size: 14px;
      margin: 5px 10px;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      height: 38px;
    }
    .user-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      margin: 0 10px;
      color: #777;
    }
  }
}
</style>